<template>

  <div>
    <lab_head />

    <lab_header :title='微博登录回调' />

    <div class="container layout layout-margin-top">

      <div class="row">
        <div class="col-md-9 layout-body">

          <div class="content" style="height: 550px">
            <!-- <div class="row"> -->

            <div v-show='is_show' style="    padding-top: 20%;padding-left: 40%;font-size: 20px">
              跳转中....
            </div>

            <div v-show='visiable'>
              绑定用户
              <br>
              用户名: <input
                type="text"
                v-model="username"
                @blur="check_username"
              >
              <span style="color:red">{{username_message}}</span>
              <br>
              密码: <input
                type="password"
                v-model="password"
              >
              <br>
              <button @click="bindUser">绑定</button>
            </div>

            <!-- </div> -->
          </div>

        </div>
        <div class="col-md-3 layout-side">

          <user_info />
          <last_paths />
          <QR_code />

        </div>
      </div>
    </div>

    <lab_footer />

  </div>

</template>

<script>
import {
  weibo_callback_post,
  weibo_binduser_post,
} from "@/components/axios_api/api";
// import { oauth_callback_post } from './axios_api/api'
import lab_head from "./common/lab_head";
import lab_header from "./common/lab_header";
import lab_footer from "./common/lab_footer";
import user_info from "./common/user_info";
import last_paths from "./common/last_paths";
import QR_code from "./common/QR_code";
import { getpaths_get } from "./axios_api/api";

export default {
  data() {
    return {
      visiable: false, // 绑定用户窗口
      uid: "", // weibo_uid
      username: "",
      password: "",
      username_message: "",
      username_error: false,
      is_show: true,
    };
  },
  components: {
    lab_head,
    lab_header,
    lab_footer,
    user_info,
    last_paths,
    QR_code,
  },
  created() {},
  mounted() {
    this.getCode();
  },
  methods: {
    check_username() {
      console.log("判断用户名");
      console.log(this.username == "");
      var reg = new RegExp(/^[a-zA-Z0-9_-]{4,16}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
      if (this.username == "") {
        this.username_message = "用户名不能为空";
        this.username_error = true;
        return false;
      }
      if (!reg.test(this.username)) {
        this.username_message = "用户名格式不正确";
        this.username_error = true;
        return false;
      }
      return true;
    },
    // 获取微博传过来的code，发送给django后端进行验证
    getCode() {
      // 获取url中的code 信息
      // 当前url 是  http://192.168.56.100:8888/oauth/callback/?code=fe6cbe07708aecf4a2b3d942ed692c4c
      let code = this.$route.query.code;
      console.log(this.$route.query);
      // 给后端发送code
      let params = { code: code };
      weibo_callback_post(params).then((resp) => {
        console.log("第三方登录后的响应", resp);
        if (resp.data.code == 200) {
          let res = resp.data;
          localStorage.setItem("username", res.account);
          // localStorage.setItem('img', res.img)
          localStorage.setItem("token", res.token);
          localStorage.setItem("uid", res.id);
          this.login_username = res.account;
          this.opened = false;
          // alert(res.message)
          this.$router.push("/");
        } else {
          this.visiable = true;
          this.is_show = false;
          this.uid = resp.uid;
        }
      });
    },

    bindUser() {
      // if(this.username_error){
      //   return
      // }
      // 发送  用户名, 密码, weibo_uid 到后端接口, 进行绑定
      console.log("uid>>>>>>>", this.uid);
      
      let params = {
        account: this.username,
        password: this.password,
        unid: this.uid,
      };
      // 绑定用户钉钉
      weibo_binduser_post(params).then((resp) => {
        if (resp.code == 200) {
          let res = resp.data;
          localStorage.setItem("username", res.account);
          // localStorage.setItem('img', res.img)
          localStorage.setItem("token", res.token);
          localStorage.setItem("uid", res.id);
          this.login_username = res.account;
          this.opened = false;
          // alert(res.message)
          this.$router.push("/");
        } else {
          alert(resp.message);
        }
      });
    },
  },
};
</script>